<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>SF轻小说-全国最大的轻小说网站</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap 101 Template</title>
		
		<!-- Bootstrap -->
		<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="${pageContext.request.contextPath}/js/jquery-1.11.0.min.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
		<link href="${pageContext.request.contextPath}/css/singly.css" rel="stylesheet"/>
		
		<script>
			/*增加或删除数量*/
			function sub(psid) {
			    var yzquantity = $(".yzquantity" + psid).val();
			    if (yzquantity > 0) {
			        if(yzquantity == 1) {
			            alert("已到达最小数量！");
			            return;
			        }
			        yzquantity--;
			        $(".yzquantity" + psid).val(yzquantity);
			    } else {
			        alert("请输入有效数量！");
			    }
			}
			
			function plus(psid) {
			    var yzquantity = $(".yzquantity" + psid).val();
			    if (yzquantity > 0) {
			        yzquantity++;
			        $(".yzquantity" + psid).val(yzquantity);
			    } else {
			        alert("请输入有效数量！");
			    }
			}
			
			function yzquantity(psid) {
			    var yzquantity = $(".yzquantity" + psid).val();
			    var reg = /^[0-9]*$/;
			    reg.test(yzquantity);
			    if (reg.test(yzquantity) == false) {
			        alert("请输入有效数量！");
			        $(".yzquantity" + psid).val(yzquantity);
			    }
			}
			
		</script>
	</head>
	<body>
		，<div class="container">
			<div class="row" id="a">
				<div class="col-lg-1"></div>
				<div class="col-lg-3">
					<img src="${pageContext.request.contextPath }/images/goods/logo.png"/>
				</div>
				<div class="col-lg-5"></div>
				<div class="col-lg-3">
					<div class="a_1">
						<a href="${pageContext.request.contextPath }/page/vipPage.jsp">个人中心</a> | <a href="${pageContext.request.contextPath }/showShopService">我的订单</a><br/>
						[ <a href="${pageContext.request.contextPath}/page/login1.jsp">登录</a> ] | [ <a href="${pageContext.request.contextPath}/page/login2.jsp">免费注册</a> ]
					</div>
				</div>
				</div>
			<div class="row" id="b">
				<div class="col-lg-1"></div>
				<div class="col-lg-4">
					<ul class="nav navbar-nav">
						<li class="active"><a href="${pageContext.request.contextPath}/index.jsp">首页<span class="sr-only">(current)</span></a></li>
							<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">书库<span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="${pageContext.request.contextPath }/findPageServlet?currentPage=1&id=1">IT技术</a></li>
					            <li><a href="${pageContext.request.contextPath }/findPageServlet?currentPage=1&id=2">小说文学</a></li>
					            <li><a href="${pageContext.request.contextPath }/findPageServlet?currentPage=1&id=3">历史传记</a></li>
					            <li><a href="${pageContext.request.contextPath }/findPageServlet?currentPage=1&id=4">生活</a></li>
					            <li><a href="${pageContext.request.contextPath }/findPageServlet?currentPage=1&id=5">经营管理</a></li>
					            <li><a href="${pageContext.request.contextPath }/findPageServlet?currentPage=1&id=6">轻小说</a></li>
					          </ul>
						</li>
						<li><a href="#">排行榜</a></li>
						<li><a href="#">App下载</a></li>
					</ul>
				</div>
				<div class="col-lg-4">
					<form class="navbar-form navbar-left">
					    <div class="form-group">
							<input type="text" class="form-control" placeholder="输入作品名/作者名">
					    </div>
					    <button type="submit" class="glyphicon glyphicon-hand-right btn btn-info">&nbsp;搜索</button>
					</form>
				</div>
				<div class="col-lg-3">
					<div class="b_1">
					<div class="btn-group">
					  <button type="button" class="btn btn-default btn-sm">购物车0件</button>
					  <button type="button" class="btn btn-info dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					    <span class="caret"></span>
					    <span class="sr-only">Toggle Dropdown</span>
					  </button>
						<a class="btn btn-warning btn-sm" href="#" role="button">结算</a>
					  <ul class="dropdown-menu">
					    <li><a href="#">商品1</a></li>
					    <li><a href="#">商品2</a></li>
					    <li><a href="#">商品3</a></li>
					    <li><a href="#">商品4</a></li>
					  </ul>
					</div>
					</div>
				</div>
			</div>
			<div class="row" id="c">
				<div class="col-lg-8"></div>
				<div class="col-lg-3">
					<div class="c_1">
						<a href="#">会员福利</a>&nbsp;&nbsp;&nbsp;&nbsp;
						<a href="#">热卖商品</a>&nbsp;&nbsp;&nbsp;&nbsp;
						<a href="#">更多商品...</a>
					</div>
				</div>
				<div class="col-lg-1"></div>
			</div>
			<div class="row" id="d">
				<div class="col-lg-2"></div>
				<div class="col-lg-3">
					<div class="d_1">
						<img src="${pageContext.request.contextPath }/${goods.image}"/>
					</div>
				</div>
				<div class="col-lg-4">
					<div class="d_2"><font style="font-size: 20px;">${fn:substring(goods.name, 0, 16)}</font></div>
					<font style="color: #C0C0C0;">- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</font>
					<div>
						<div style="float: left;">销售价：￥ <font style="font-size: 30px; color: red;">${goods.salesprice }</font></div>
						<div><font style="font-size: 12px;color: palevioletred;float: right;">图书编号：${goods.goodsno }</font> </div>
					</div>
					<div class="d_2" style="clear: left;">市场价：￥<del>${goods.marketprice }</del></div>
					<div class="d_2">作者：${goods.author }</div>
					<div class="d_2">出版社：${goods.publisher }</div>
					<div class="d_2">出版时间：${goods.pubtime }</div>
					<div class="d_2">库存：现货(${goods.stock })</div>
					<div class="d_2">顾客评分：<font style="color: darkorange;">★ ★ ★ ★ ★ </font>(已有 0 人评价)</div>
					<div style="background-color: lightyellow;" class="d_2">
						<form action="${pageContext.request.contextPath }/shoppingServlet" method="post">
						<div class="d_4" style="font-size: 15px;">购买数量：</div>
						<div class="plussub">
							<span onclick="sub(1)" class="sub">-</span>
							<input class="yzquantity1" onblur="yzquantity(1)" type="text" value="1" name="number">
							<span onclick="plus(1)" class="plus">+</span>
						</div>
						<div class="d_3" style="clear: left;">
							
							<div class="bt">
								<button type="submit" class="btn btn-success" aria-label="Left Align" id="shop">
							 	 	<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 加入购物车
								</button>
							</div>
							<div class="bu">
								<button type="submit" class="btn btn-info" aria-label="Left Align" id="buy">
							 		 <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 立即购买
								</button>
							</div>
						</div>
						</form>
					</div>
				</div>
				<div class="col-lg-2"></div>
			</div>
			<div class="row" id="e">
				<div class="col-lg-1"></div>
				<div class="col-lg-2 ">
					<div class="e_1">
						<div class="e_1">热卖商品</div>
						<div class="e_2 img-responsive center-block">
							<img src="${pageContext.request.contextPath }/images/goods/431e5a06-237d-4e29-8319-5fd44e64c820.jpg"/>
						</div>
						<div class="text-center">
							<font style="font-size: 10px;">每天都是颓废摸鱼小城管</font><br>
							￥<font style="color: red;">89.0</font>
						</div>
					</div>
				</div>
				<div class="col-lg-9">
					<div class="bs-example bs-example-tabs" data-example-id="togglable-tabs">
					       <ul id="myTabs" class="nav nav-tabs" role="tablist">
					           <li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">商品详情</a>
					           <li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">顾客评价(0)</a>
					           <li role="presentation" class="dropdown">
					               <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">Dropdown <span class="caret"></span></a>
					               <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
					                   <li><a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a>
					                   <li><a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a>
					               </ul>
					           
					       </ul>
					       <div id="myTabContent" class="tab-content">
					           <div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledby="home-tab">
					               <p>${goods.description }</p>
					           </div>
					           <div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledby="profile-tab">
					               <p>还没有顾客评价过呢~~ </p>
					           </div>
					           <div role="tabpanel" class="tab-pane fade" id="dropdown1" aria-labelledby="dropdown1-tab">
					               <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
					           </div>
					           <div role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledby="dropdown2-tab">
					               <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
					           </div>
					       </div>
					   </div>
				</div>
			</div>
			
			<div class="row" id="g">
				<div class="col-lg-2"></div>
				<div class="col-lg-8 text-center" style="height:35px;">
					<div id="g_1">
						<a href="img.html">免责声明</a> &nbsp;|&nbsp; <a href="img.html">版权隐私</a> &nbsp;|&nbsp; <a href="img.html">联系方式</a> &nbsp;| &nbsp; <a href="img.html">友情链接</a> &nbsp;| &nbsp;
						<a href="img.html">广告投放</a> &nbsp;|&nbsp; <a href="img.html">粤ICP备10062407号</a> &nbsp;|&nbsp; <a href="img.html">免责声明</a>
					</div>
				</div>
				<div class="col-lg-2"></div>
			</div>
			<div class="row" id="g">
				<div class="col-lg-2"></div>
				<div class="col-lg-8 text-center">
					粤文网[2012]0726-109号[c]2005 - 2014 SFACG.COM ALL Rights Reserved
				</div>
				<div class="col-lg-2"></div>
			</div>
		</div>
	</body>
</html>

